<template>
  <div :class="className">
    <!-- style -->
    <!--<div v-html="css"></div>-->

    <div style="height: 30px;line-height: 30px;text-align: center">
      底部悬浮按钮组件占位区域
    </div>

    <div class="fixed-box" :style="box_style">
      <!--悬浮按钮静态-->
      <div class="btn" :style="button_style">{{title}}</div>
    </div>

  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	import openImage from "@/resource/images/open.png";

	export default {
		props: ['id', 'datas', 'styles'],
    data() {
			return{
				emptyImage,
				openImage
      }
    },
		computed: {
			box_style() {
				if(this.datas.preview_color) {
					const {
            button_size,
            over_bottom,
            margin_size
					} = this.datas;

					return `

                height: ${button_size}px;
                line-height: ${button_size}px;
                poposition: fixed;
                bottom: ${over_bottom + 155}px;
                padding: 0 ${margin_size}px;
                box-sizing: border-box;
            `;
        }
			},
      button_style() {
				if(this.datas.preview_color) {
					const {
						preview_color,
            text_size,
            text_color,
            radius_size
					} = this.datas;

					return `
                border-radius: ${radius_size}px;
                overflow: hidden;
                font-size: ${text_size}px;
                color: ${text_color};
                background-color: ${preview_color.color};
                background-image: url(${preview_color.isColor == 2? preview_color.image: ''});
                background-size: 100% auto;
                bakcground-position: center;
            `;
        }
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
      /** 标题 */
			title() {
				return this.datas.title || '底部悬浮按钮';
			},
		},

		methods: {
		},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .fixed-box {
    width: 375px;
    position: fixed;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      width: 100%;
      height: 100%;
      text-align: center;
    }
  }

</style>
